import 'package:flutter/material.dart';

class WelcomePage extends StatefulWidget {
  const WelcomePage({super.key, required this.animationController});

  final AnimationController animationController;

  @override
  State<WelcomePage> createState() => _WelcomePageState();
}

class _WelcomePageState extends State<WelcomePage>
    with SingleTickerProviderStateMixin {
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    //进入的时候先text title image ENTER
    //我们少了一个动画
    var slideInAnimation =
        Tween(begin: const Offset(1.7, 0), end: const Offset(0, 0))
            .chain(CurveTween(curve: const Interval(0.6, 0.8)))
            .chain(CurveTween(curve: Curves.easeInOut))
            .animate(widget.animationController);
    var titleInAnimation =
        Tween(begin: const Offset(3, 0), end: const Offset(0, 0))
            .chain(CurveTween(curve: Curves.easeInOut))
            .chain(CurveTween(curve: const Interval(0.6, 0.8)))
            .animate(widget.animationController);
    //原来text和image的交错，并不是interval合适offset不同
    var textInAnimation =
        Tween(begin: const Offset(1, 0), end: const Offset(0, 0))
            .chain(CurveTween(curve: Curves.easeInOut))
            .chain(CurveTween(curve: const Interval(0.6, 0.8)))
            .animate(widget.animationController);
    var imageInAnimation =
        Tween(begin: const Offset(5, 0), end: const Offset(0, 0))
            .chain(CurveTween(curve: Curves.easeInOut))
            .chain(CurveTween(curve: const Interval(0.6, 0.8)))
            .animate(widget.animationController);
    return SlideTransition(
      position: slideInAnimation,
      child: Container(
        width: 400,
        // padding: const EdgeInsets.symmetric(horizontal: 18.0),
        decoration:
            const BoxDecoration(color: Color.fromRGBO(245, 235, 226, 1)),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SlideTransition(
              position: imageInAnimation,
              child: Container(
                height: 200,
                child: Image.asset("assets/introduction_animation/welcome.png",
                    fit: BoxFit.cover),
              ),
            ),
            SlideTransition(
              position: titleInAnimation,
              child: const Text(
                "Welcome",
                style: TextStyle(
                  fontSize: 24,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
            const SizedBox(
              height: 20,
            ),
            SlideTransition(
              position: textInAnimation,
              child: const Text(
                "Stay organised and live stress-free with you-do app",
                textAlign: TextAlign.center,
              ),
            ),
          ],
        ),
      ),
    );
  }
}
